import React, { useEffect, useState } from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction, Button } from '@ui-kitten/components';
import { useSelector, useDispatch } from 'react-redux';

const BackIcon = (props) => (
    <Icon {...props} name='arrow-back' />
);

export const ActionScreen = (props) => {

    const { navigation } = props
    const currentSelectedDevice = useSelector((state) => state.devices.currentSelectedDevice)

    const navigateBack = () => {
        navigation.goBack();
    };

    const handleButtonPress = (direction) => {
        console.log(`发送数据:${direction}`)
        console.log(`device :${currentSelectedDevice.id},svc:${currentSelectedDevice.serviceUUID},char:${currentSelectedDevice.characteristicUUID}`)
    }

    useEffect(() => {
    }, [currentSelectedDevice])

    const BackAction = () => (
        <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
    );

    return (
        <SafeAreaView>
            <TopNavigation title='操控设备' alignment='center' accessoryLeft={BackAction} />
            <Divider />
            <Layout>
                <View style={{ flex: 1,flexDirection:'row',justifyContent:'center' }}>
                    
                    <Button onPress={() => { handleButtonPress('left') }}>左转</Button>
                    <Button onPress={() => { handleButtonPress('right') }} >右转</Button>
                    
                    <Button onPress={() => { handleButtonPress('move') }} >前进</Button>
                    <Button onPress={() => { handleButtonPress('back') }} >后退</Button>
                    
                </View>
            </Layout>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
})